import Transaction from "https://cdn.jsdelivr.net/npm/@konghayao/promise-transaction/dist/promiseTransaction.browser.js";
import draggable from "../plugins/draggable.js";
import createBackground from "./createBackground.js";
import { initIcon } from "./initIcon.js";

export default new Transaction([
    [
        "load resource",
        () =>
            window.assetsLoader({
                Water: [
                    "./image/icon/Water.webp",
                    "./image/icon/Water-0.webp",
                    "./image/icon/Water-1.webp",
                    "./image/icon/Water-2.webp",
                ],
                Fei: [
                    "./image/icon/Fei.webp",
                    "./image/icon/Fei-0.webp",
                    "./image/icon/Fei-1.webp",
                    "./image/icon/Fei-2.webp",
                ],
                Drug: [
                    "./image/icon/Drug.webp",
                    "./image/icon/Drug-0.webp",
                    "./image/icon/Drug-1.webp",
                    "./image/icon/Drug-2.webp",
                ],
                Zoom: ["./image/icon/Zoom.webp", "./image/icon/Zoom.webp"],
                Exam: ["./image/icon/Exam.webp"],
                Next: ["./image/icon/Next.webp"],
                Menu: ["./image/icon/Menu.webp"],
                Sound: {
                    on: ["./image/icon/Sound-on.webp"],
                    off: ["./image/icon/Sound-off.webp"],
                },
                FlowBackground: ["./image/icon/icon-bg.webp"],
            }),
    ],
    [
        "createElement-left",
        () => {
            return [
                { name: "Water", config: {} },
                { name: "Fei", config: {} },
                { name: "Drug", config: {} },
            ].reduce((col, { name, config = {} }, index) => {
                config = { ...config, x: 80 * px, y: (650 + index * 120) * px };
                var container = new PIXI.Container();
                let sprite = initIcon(name, config);
                const bg = createBackground("FlowBackground", config);
                draggable(sprite);
                sprite.lockDrag();
                sprite.dragMessage.lock = false;
                container.addChild(bg);
                sprite.father = container;
                container.addChild(sprite);
                app.stage.addChild(container);
                app.stage[name] = sprite;
                col[name] = container;
                return col;
            }, {});
        },
    ],
    [
        "createElement-right",
        () => {
            return [
                { name: "Zoom", config: {} },
                { name: "Exam", config: {} },
                { name: "Next", config: {} },
            ].reduce((col, { name, config = {} }, index) => {
                config = {
                    ...config,
                    x: (400 + 80) * px,
                    y: (650 + index * 120) * px,
                };
                var container = new PIXI.Container();

                let sprite = initIcon(name, config);
                const bg = createBackground("FlowBackground", config);
                draggable(sprite);
                container.addChild(bg);
                sprite.father = container;
                container.addChild(sprite);
                app.stage.addChild(container);
                app.stage[name] = sprite;
                col[name] = container;
                return col;
            }, {});
        },
    ],
    [
        "Exam and Next",
        () => {
            const sprite = app.stage.Zoom;
            sprite.lockDrag();
            sprite.dragMessage.lock = false;
            ["Exam", "Next"].forEach((i) => {
                const el = app.stage[i];
                el.dragMessage.draggable = false;
                Boom(el);
            });
        },
    ],
    [
        "createElement-top",
        () => {
            return [
                { name: "Menu", config: {} },
                { name: "Sound", config: {} },
            ].reduce((col, { name, config = {} }, index) => {
                config = {
                    ...config,
                    x: (80 + 400 * index) * px,
                    y: 80 * px,
                };
                var container = new PIXI.Container();

                let sprite = initIcon(name, config);
                Boom(sprite);
                const bg = createBackground("FlowBackground", config);

                container.addChild(bg);
                sprite.father = container;
                container.addChild(sprite);
                app.stage.addChild(container);
                app.stage[name] = sprite;
                col[name] = container;
                return col;
            }, {});
        },
    ],
]);
function Boom(el) {
    const width = el.width;
    el.on("pointerdown", () => {
        const trans = [
            {
                value: width * 1.3,
                duration: 100,
                easing: "easeOutQuad",
            },
            {
                easing: "easeInQuad",
                value: width,
                duration: 100,
            },
        ];
        el.anime({
            width: trans,
            height: trans,
        });
    });
}
